<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>功能</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{ height: 50px; top:0; background:#fff; }
.g-back{ float: left; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{float: right;width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*容器内容*/
.page-wrap{ height: 100%; width: 100%; background:#f8f8f8;overflow-y: auto; }
.info-item{ padding-top:15px; background: #fff; }
.info-item h4{padding-left: 15px; font-size: 17px; font-weight: bold;color:#333;}
.info-item span{ line-height: 45px; font-size: 15px;  }
.info-item span img{margin-top:2px; float: right;height: 40px; width: 40px;border-radius: 50%;  }
.info-item .info-k{ float:left;color: #888; width:30%;  }
.info-item .info-v{ float:right; color:#333;text-align: right;  width: 70%;  }
/*.info-item .to-sel{   }*/
.ul-1{padding-left: 15px; background: #fff; }
.ul-1>li{padding-right: 15px;  border-bottom:1px solid #f2f2f2; overflow: hidden;}
.ul-2{ display: none; background: #eee; clear: both; }
.ul-2>li{padding-right: 15px; line-height: 30px; border-bottom:1px solid #f2f2f2; font-size: 15px; text-align: right;}
input.info-v{  height: 45px;line-height: 45px; font-size: 15px; -webkit-caret-color:#1985f6; caret-color:#1985f6;  }
.info-item .g-down{padding-right: 18px;  background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px;  }
.info-item .g-up{padding-right: 18px;  background:url(../img/up_03.png) right center no-repeat; background-size: 12px 7px;}
/*底部按钮*/
.botm{  margin:15px auto;  }
.botm a{  display: block; width: 90%; line-height: 45px; margin:0 0 10px 18px;border-radius: 3px; 
          border:1px solid #278ffe; text-align: center; font-size: 15px;}
.botm .btn-ok{  background: #fff linear-gradient(to right,#06b8fe,#278ffe); color:#fff; }
.botm .btn-ed{border:1px solid #278ffe; color:#278ffe; }
/*辅助类*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }

</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
              <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>                   
                      <span class="t-title">个人信息</span>  
                      <a  class="g-other"></a>
              </div>
              <!-- 内容区 -->
              <div class="weui-tab__bd page-wrap" >
                     <!-- 信息内容 -->
                      <div class="info-item">
                            <h4>基本信息</h4>
                            <ul class="ul-1">
                                  <li><span class="info-k">头像</span><span class="info-v"><img src="../img/t1.png"></span></li>
                                  <li><span class="info-k">工号</span><input class="info-v" value="87686868"></input></li>
                                  <li><span class="info-k">手机号</span><input class="info-v" value="143543543"></input></li>
                                  <li>
                                         <!-- <span class="info-k">所属部门</span><input class="info-v" value="高中教科部"></input> -->
                                          <div><span class="info-k">所属部门</span><span class="info-v to-sel">高中教科部</span></div>
                                          <ul class="ul-2">
                                                <li>高中教科部</li>
                                                <li>初中教科部</li>
                                                <li>小学教科部</li>
                                          </ul>
                                  </li>
                            </ul>               
                      </div>

                      <div class="info-item">
                            <h4>详细信息</h4>
                            <ul class="ul-1">
                                  <li>
                                        <div><span class="info-k">年段</span><span class="info-v to-sel">高一</span></div>
                                        <ul class="ul-2">
                                              <li>1</li>
                                              <li>2</li>
                                              <li>3</li>
                                        </ul>
                                  </li>
                                  <li>
                                        <div><span class="info-k">支部</span><span class="info-v to-sel">高中部</span></div>
                                        <ul class="ul-2">
                                              <li>1</li>
                                              <li>2</li>
                                              <li>3</li>
                                        </ul>
                                  </li>
                                  <li>
                                        <div><span class="info-k">岗位</span><span class="info-v to-sel">语文组</span></div>
                                        <ul class="ul-2">
                                                  <li>1</li>
                                                  <li>2</li>
                                                  <li>3</li>
                                        </ul>
                                  </li>
                                  <li>
                                        <div><span class="info-k">编制</span><span class="info-v to-sel">教科部三组</span></div>
                                        <ul class="ul-2">
                                                      <li>1</li>
                                                      <li>2</li>
                                                      <li>3</li>
                                          </ul>
                                  </li>
                            </ul>
                      </div>
                      <!-- 底部按钮 -->
                      <div class="botm">
                            <a class="btn-ok">确 &nbsp; &nbsp; 认</a>
                            <a class="btn-ed">修 &nbsp; &nbsp; 改</a>
                      </div>
              </div>
        </div>
</div>
</body>
<script>
// 初始化输入框不可用
$("input.info-v").on("focus",function(){ this.blur(); })
// "确认","修改" 按钮设置
$(".btn-ok").hide();                       //确认按钮初始隐藏
// 点击 "修改" 按钮 
$(".btn-ed").click(function(){
      $(this).hide();
      $(".to-sel").addClass("g-up");    
      $(".btn-ok").show();
      $("input.info-v").off("focus");
})
// 点击 "确认" 按钮 
$(".btn-ok").click(function(){
      $(this).hide();
      $(".to-sel").removeClass("g-up").removeClass("g-down");  
      $(".ul-2").hide();
     $(".btn-ed").show();
     $("input.info-v").on("focus",function(){ this.blur(); })
})
// 下拉
$('.to-sel').click(function(){
     if( $(this).hasClass("g-up") ){
          $(this).parent().next("ul").slideDown();
          $(this).removeClass("g-up").addClass("g-down");
     }else if( $(this).hasClass("g-down") ){
          $(this).parent().next("ul").slideUp();
          $(this).removeClass("g-down").addClass("g-up");
     }
})
//下拉列表项点击
$(".ul-2").find("li").click(function(){
     $(this).parent().prev().find(".info-v").text( $(this).text() );
     $(this).parent().prev().find(".info-v").removeClass("g-down").addClass("g-up");
     $(this).parent().slideUp();
})
</script>
</html>